<script setup lang="ts" name="Footer">//setup语法糖
import { ref, reactive, toRefs, toRef, computed, watch, watchEffect, defineExpose, defineProps, withDefaults, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
import Navigator from './Navigator.vue'
import { type Persons } from '@/types'
let name = ref('zhangsan') //ref响应式(RefImpl对象): 基本类型(数字,字符串), 对象(层级不深)
let cars = ref({ brand: '奔驰', price: 100 }) //ref对象(层级不深)
let car = reactive({ brand: '奔驰', price: 100 }) //reactive相应式(Proxy代理函数): 只能对象数组(层级深)
let { brand, price } = toRefs(car) //toRefs: 将reactive中k-v全转为ref,解构赋值为响应式(ObjectRefImpl)
let brands = toRef(car, 'brand') //toRef: 将reactive中某个k-v转为ref
let computedResult = computed({ //计算属性(ref响应式)
  get() {
  },
  set(val) {
  }
})
const stopWatch = watch(name, (newValue, oldValue) => { //监视ref基本类型,不写.value

})
watchEffect(() => { //自动监视:不用指定监视谁,用到就监视,立即监视(一上来就监视)

})

let title = ref() //创建空的用于存储ref标记内容
function showRef() {
  console.log(title.value) //ref打印整个html标签DOM
}
let child = ref()
function getRef() {
  console.log(child.value) //ref父获取子的属性
}

let personList = reactive<Persons>([ //props父传子
  { id: '123', name: '王五', age: 18 },
  { id: '123', name: '赵六', age: 20 }
])

</script>

<template> <!--template不编译-->
  <h1 ref="title">名称:{{ name }}</h1> <!--1.html标签上：html标签DOM,给节点打唯一标识id,父子组件id可能重名(不建议用id)-->
  <button @click="showRef">ref获取html标签DOM</button>
  <Navigator ref="child" /> <!--2.组件标签上：获取子组件实例-->
  <button @click="getRef">ref父获取子的属性</button>
  <Navigator :list="personList"/> <!--props父传子-->
</template>

<style lang="less" scoped>
//less嵌套写法,scoped域:样式只对当前组件有效
.component-name {}
</style>